<template>
    <div class="common-layout">
        <el-container class="layout-container-demo" style="height: 750px">
            <el-aside width="auto">
                <MyMenu></MyMenu>
            </el-aside>
            <el-container class="container">
                <el-header>
                    <MyHeader></MyHeader>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  
<script lang="ts" setup>
import MyMenu from "../../components/MyMenu.vue";
import MyHeader from "../../components/MyHeader.vue";

</script>
  
<style scoped>
.el-aside,
.el-container,
.common-layout,
body,
html {
    height: 100%;
}

.layout-container-demo .el-header {
    position: relative;
    background-color: #fff;
    color: var(--el-text-color-primary);
    line-height: 60px;
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
    background-color: rgb(32, 32, 38);
    height: 100%;
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    margin: 48px 20px 20px 20px;
    background-color: #fff;
    height: 100%;
}
</style>